﻿@page "/"
@inherits AppComponentBase

<PageOutlet Url=""
            Title="Home"
            Description="home page of bit platform" />

<div class="page-container">
    <img src="/images/home/hero-gradient-dark.svg" class="hero-gradient dark-theme" />
    <img src="/images/home/hero-gradient-light.svg" class="hero-gradient light-theme" />

    <section class="page-section hero-section">
        <div class="page-section-content">
            <div class="hero-section-content">
                <BitText Typography="BitTypography.H1" Gutter Class="hero-title">
                    bit platform
                </BitText>
                <BitText Typography="BitTypography.H4" Gutter Class="hero-subtitle">
                    Build all of your apps
                    <br />
                    using what you already know and love
                </BitText>
            </div>
        </div>
    </section>

    <section class="page-section text-section">
        <div class="page-section-content">
            <div class="section-title-container">
                <div class="section-title-line reversed"></div>
                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                    What is <span style="text-transform:lowercase">bit platform?</span>
                </BitText>
                <div class="section-title-line"></div>
            </div>
            <br />
            <BitText Typography="BitTypography.H2" Class="text-title">
                code, build & deploy
                <br />
                your apps easily
            </BitText>
            <br />
            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                A set of tools for .NET developers across multiple platforms
            </BitText>
        </div>
    </section>

    <img src="/images/home/hero-image.webp" class="hero-image" />

    <section class="page-section text-section">
        <div class="page-section-content">
            <div class="section-title-container">
                <div class="section-title-line reversed"></div>
                <BitText Typography="BitTypography.H6" Gutter Class="section-title">
                    Why <span style="text-transform:lowercase">bit platform?</span>
                </BitText>
                <div class="section-title-line"></div>
            </div>
            <br />
            <BitText Typography="BitTypography.H2" Class="text-title">
                best partner for teams
                <br />
                creating apps with
                <br />
                <span class="highlight-1">.NET and Blazor</span>
            </BitText>
            <br />
            <BitText Typography="BitTypography.H5" Class="text-subtitle">
                Instead of using miscellaneous packages, you'll have
                <br />
                a set of comprehensive tools to cover any requirement.
            </BitText>
        </div>
    </section>

    <section class="page-section products-section" id="@OUR_PRODUCTS_SECTION_ID" @ref="ourProductsRef">
        <div class="page-section-content">
            <div class="section-title-container">
                <div class="section-title-line reversed"></div>
                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Our products</BitText>
                <div class="section-title-line"></div>
            </div>
            <br />
            <BitText Typography="BitTypography.H2" Class="text-title">
                variety of <span class="highlight-2">tools</span> to
                <br />
                make better apps
            </BitText>
            <br />
            <Products />
        </div>
    </section>

    <section class="page-section tech-section">
        <div class="page-section-content">
            <div class="section-title-container">
                <div class="section-title-line reversed"></div>
                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Tech we use</BitText>
                <div class="section-title-line"></div>
            </div>
            <br /><br /><br />
            <div class="tech-list">
                <a target="_blank" title="C#" class="tech-item csharp-item" href="https://dotnet.microsoft.com/en-us/languages/csharp"></a>
                <a target="_blank" title="Blazor" class="tech-item blazor-item" href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor"></a>
                <a target="_blank" title="Visual Studio" class="tech-item vs-item" href="https://visualstudio.microsoft.com/"></a>
                <a target="_blank" title="git" class="tech-item git-item" href="https://git-scm.com/"></a>
                <a target="_blank" title="GitHub" class="tech-item github-item" href="https://github.com">
                    <svg height="70" width="70" viewBox="0 0 16 16">
                        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
                    </svg>
                </a>
                <a target="_blank" title="Sass" class="tech-item sass-item" href="https://sass-lang.com/"></a>
            </div>
            <br /><br />
            <BitText Typography="BitTypography.H4" Class="tech-subtitle">
                We've developed all of our websites
                <br />
                with our own toolchain!
            </BitText>
        </div>
    </section>

    <section class="page-section customer-section">
        <div class="page-section-content">
            <div class="section-title-container">
                <div class="section-title-line reversed"></div>
                <BitText Typography="BitTypography.H6" Gutter Class="section-title">Our customers</BitText>
                <div class="section-title-line"></div>
            </div>
            <br />
            <BitText Typography="BitTypography.H2" Class="text-title">
                people <span class="highlight-2">love</span> what
                <br />
                they can make
            </BitText>
            <br /><br />
            <CustomerCarousel />
        </div>
    </section>
</div>
